import dayjs from "dayjs";
import { reactive, ref, onMounted, h } from "vue";
import { message } from "@/utils/message";
import { addDialog } from '@/components/ReDialog'
import { ElMessageBox } from 'element-plus'
import { type FormItemProps } from "./types";
import { type PaginationProps } from "@pureadmin/table";
import elForm from '../form.vue'
import { $t } from "@/plugins/i18n";
import { useTranslationLang } from "@/layout/hooks/useTranslationLang";

import { recordList, excelRecord, getListByCodes } from '@/utils/api/system/record'

export function useDept() {
    const form = reactive({
        code: "",
        content: "",
        agvid: "",
        dateRange: null,
        begin: "",
        end: "",
        pageNumber: 0,
        pageSize: 10,
        sortName: "createtime",
        sortType: 0
    });
    const formRef = ref();
    const dataList = ref([]);
    const loading = ref(true);
    const pagination = reactive<PaginationProps>({
        total: 0,
        pageSize: 10,
        currentPage: 1,
        background: true
    });

    const columns = ref<TableColumnList>([
        {
            label: $t('record.alarmCode'),
            prop: "code",
            width: 140,
            align: "left",
            sortable: true
        },
        {
            label: $t('record.vehicle'),
            prop: "AgvName",
            width: 100,
            align: "left",
            sortable: true
        },
        {
            label: $t('record.content'),
            prop: "contents",
            width: 350,
            align: "left",
            sortable: true
        },
        {
            label: $t('record.logSource'),
            prop: "recordtype",
            minWidth: 70,
            align: "left"
        },
        {
            label: $t('record.remarks'),
            prop: "note",
            align: "left",
            formatter: ({ note }) => h('a', {
                href: '#',
                target: '_blank',
                onClick: function (event) {
                    AlarmPrompt(note, event);
                },
                style: {
                    color: 'blue', // 超链接颜色
                    textDecoration: 'underline', // 下划线
                    cursor: 'pointer', // 鼠标指针变成手形
                },
            }, note ? $t('record.treatmentMethod') : '')
        },
        {
            label: $t('record.creationTime'),
            prop: "createtime",
            width: 160,
            formatter: ({ createtime }) => dayjs(createtime).format("YYYY-MM-DD HH:mm:ss")
        },
        // {
        //   label: "操作",
        //   fixed: "right",
        //   width: 200,
        //   slot: "operation"
        // }
    ])

    function tableReloading() {
        columns.value = [
            {
                label: $t('record.alarmCode'),
                prop: "code",
                width: 140,
                align: "left",
                sortable: true
            },
            {
                label: $t('record.vehicle'),
                prop: "AgvName",
                width: 100,
                align: "left",
                sortable: true
            },
            {
                label: $t('record.content'),
                prop: "contents",
                width: 350,
                align: "left",
                sortable: true
            },
            {
                label: $t('record.logSource'),
                prop: "recordtype",
                minWidth: 70,
                align: "left"
            },
            {
                label: $t('record.remarks'),
                prop: "note",
                align: "left",
                formatter: ({ note }) => h('a', {
                    href: '#',
                    target: '_blank',
                    onClick: function (event) {
                        AlarmPrompt(note, event);
                    },
                    style: {
                        color: 'blue', // 超链接颜色
                        textDecoration: 'underline', // 下划线
                        cursor: 'pointer', // 鼠标指针变成手形
                    },
                }, note ? $t('record.treatmentMethod') : '')
            },
            {
                label: $t('record.creationTime'),
                prop: "createtime",
                width: 160,
                formatter: ({ createtime }) => dayjs(createtime).format("YYYY-MM-DD HH:mm:ss")
            },
            // {
            //   label: "操作",
            //   fixed: "right",
            //   width: 200,
            //   slot: "operation"
            // }
        ]
    }

    // 告警提示
    function AlarmPrompt(code, event) {
        event.preventDefault(); // 阻止默认行为
        getListByCodes({ codes: code }).then(res => {
            // console.log(res.Content);
            let htmlData = ''
            res.Content.map((item, index) => {
                htmlData += `<div>
                                <span>${index + 1}.</span>
                                ${item.info}
                            </div>`
            })
            ElMessageBox.alert(
                htmlData,
                $t('record.treatmentMethod'),
                {
                    dangerouslyUseHTMLString: true,
                    // type: 'warning',
                    // center: true,
                }
            )
        })

    }

    async function onSearch() {
        loading.value = true;
        const { Content } = await recordList(form);

        let newData = Content.Results;
        dataList.value = newData;
        pagination.total = Content.TotalCount;
        pagination.pageSize = Content.PageSize;
        pagination.currentPage = Content.PageNumber + 1;

        setTimeout(() => {
            loading.value = false;
        }, 500);
    }

    // 导出
    function exportExcel() {
        ElMessageBox.confirm(
            `是否确认导出数据?`,
            '提示',
            {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
                center: true,
            }
        ).then(() => {
            excelRecord(form, '告警列表')
        }).catch(() => { })
    }

    // 重置
    function resetForm(formEl) {
        if (!formEl) return;
        formEl.resetFields();
        onSearch();
    }

    function handleSizeChange(val: number) {
        form.pageSize = val
        onSearch()
    }

    function handleCurrentChange(val: number) {
        form.pageNumber = val - 1
        onSearch()
    }

    onMounted(async () => {
        onSearch()
    })

    return {
        columns,
        loading,
        dataList,
        form,
        onSearch,
        resetForm,
        pagination,
        handleSizeChange,
        handleCurrentChange,
        exportExcel,
        tableReloading
    }
}